<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#allmap { position: relative; }
	#tools { position: absolute; left: 0; top: 0; z-index: 1000;}
	.tools-bar { display: flex; }
	.label { width: 80px; text-align: right; }
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="tools">
		<div class="tools-bar">
			<div class="label">heading:</div>
			<button id="heading-add">+</button>
			<input type="text" id="heading" value="40">
			<button id="heading-minus">-</button>
		</div>
		<div class="tools-bar">
			<div class="label">tilt:</div>
			<button id="tilt-add">+</button>
			<input type="text" id="tilt" value="70">
			<button id="tilt-minus">-</button>
		</div>
		<div class="tools-bar">
			<button id="loop">loop</button>
			<button id="stop">stop</button>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	/*
	我们可以使用 heading 和 tilt 属性控制地图的旋转角度和俯角
	*/
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	/*
	MapOptions
	此类表示Map构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。
	属性	类型	描述
	minZoom	Number	地图允许展示的最小级别
	maxZoom	Number	地图允许展示的最大级别
	mapType	MapTypeId	地图类型，默认为BMAP_NORMAL_MAP
	enableAutoResize	Boolean	开启自动适应地图容器变化，默认启用
	*/
	var map = new BMapGL.Map("allmap");    // 创建Map实例
  	var point = new BMapGL.Point(116.280190, 40.049191);
	map.centerAndZoom(point, 19);  // 初始化地图,设置中心点坐标和地图级别
	/*
	enableScrollWheelZoom()	none	允许地图可被鼠标滚轮缩放，默认禁用
	*/
	map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放


	map.setHeading(40);   // 设置地图旋转角度
	map.setTilt(70);       // 设置地图的倾斜角度

	var heading = document.getElementById('heading');
	var headingAdd = document.getElementById('heading-add');
	var headingMinus = document.getElementById('heading-minus');
	var tilt = document.getElementById('tilt');
	var tiltAdd = document.getElementById('tilt-add');
	var tiltMinus = document.getElementById('tilt-minus');

	heading.addEventListener('input', function(e) {
		map.setHeading(e.target.value);
	});
	tilt.addEventListener('input', function(e) {
		map.setTilt(e.target.value);
	});

	headingAdd.addEventListener('click', function(e) {
		heading.value++;
		map.setHeading(heading.value);
	});
	headingMinus.addEventListener('click', function(e) {
		heading.value--;
		map.setHeading(heading.value);
	});
	tiltAdd.addEventListener('click', function(e) {
		tilt.value++;
		map.setTilt(tilt.value);
	});
	tiltMinus.addEventListener('click', function(e) {
		tilt.value--;
		map.setTilt(tilt.value);
	});
	
	var task;
	document.getElementById('loop').addEventListener('click', function(e) {
		task = setInterval(() => {
			if (loop) {
				heading.value++;
				map.setHeading(heading.value);
			}
		}, 100);
	});
	document.getElementById('stop').addEventListener('click', function(e) {
		task && clearInterval(task);
	})
</script>
